<template>
  <el-dialog v-model="dialogFormVisible" title="Change Issue Status"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :show-close="false"
             center
             width="50%">

    <el-form :model="form" :label-width="formLabelWidth">

      <el-form-item v-for="field in fieldsRequired" :key="field.name" :label="field.title">

        <el-input v-model="field.value" autocomplete="off" v-if="field.schema.type === `timetracking`" />

        <el-input v-model="field.value" autocomplete="off" v-if="field.schema.type === `string`" />

        <el-select
          v-if="field.schema.type === `user`"
          v-model="field.value"
          filterable
          remote
          @visible-change="onselectionchange(field)"
          placeholder=""
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            :autocomplete="true"
            v-for="item in options"
            :key="item.value"
            :label="item.displayName"
            :value="item.accountId"
          >
            <div display="flex">
              <el-avatar
                size="small"
                fit="fill"
                :src="item.avatarUrls['32x32']"
              />
              <div style="margin-left: 10px; padding-bottom: 3px">{{ item.displayName }}</div>
            </div>
          </el-option>
        </el-select>

        <el-select
          v-if="field.schema.type === `array`"
          v-model="field.value"
          filterable
          remote
          @visible-change="onselectionchange(field)"
          placeholder=""
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            :autocomplete="true"
            v-for="item in options"
            :key="item.value"
            :label="item.displayName"
            :value="item.displayName"
          >
            <div display="flex">
              <el-avatar
                size="small"
                fit="fill"
                :src="item.avatarUrls['32x32']"
              />
              <div style="margin-left: 10px; padding-bottom: 3px">{{ item.displayName }}</div>
            </div>
          </el-option>
        </el-select>

        <el-select
          v-if="field.schema.type === `option`"
          v-model="field.value"
          remote
          @visible-change="onselectionchange(field)"
          placeholder=""
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            :autocomplete="true"
            v-for="item in field.allowedValues"
            :key="item.value"
            :label="item.value"
            :value="item.id"
          >
            <div style="margin-left: 10px; padding-bottom: 3px">{{ item.value }}</div>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="Add Comments" :label-width="formLabelWidth">
        <el-input :rows="3" type="textarea" v-model="form.comments" autocomplete="off" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="doUpdate" :loading="updateLoading">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

const onSubmit = () => {
  console.log('submit!')
}
</script>
